<template>
  <div id="app" ref="appPage">
    <transition name="appfade">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
  export default {
    name: 'App',
    data(){
      return {
        clientHeight:'',
      }
    },
    created(){
      var that = this;
      mui.init();
      var token = that.$cookie.get('token');
      mui.plusReady(function() {
        token = plus.storage.getItem('token');
        that.$store.commit('user/updateToken',token);
        console.log("当前运行环境:"+mui.os)
        console.log("当前页面URL："+plus.webview.currentWebview().getURL())
      });
      if(token){
        that.$store.commit('user/updateToken',token);
      }
    },
    mounted(){
      // 获取浏览器可视区域高度
      var that=this;
      that.clientHeight = `${document.documentElement.clientHeight}`;
      window.onresize = function temp() {
        that.clientHeight = `${document.documentElement.clientHeight}`;
      };
    },
    watch: {
      // 如果 `clientHeight` 发生改变，这个函数就会运行
      clientHeight: function () {
        //this.changeFixed(this.clientHeight)
      }
    },
    methods:{
      //动态修改样式
      changeFixed(clientHeight){
        console.log("clientHeight",clientHeight);
        this.$refs.appPage.style.height = clientHeight+'px';
        this.$store.commit('common/updateDocumentClientHeight',clientHeight);
      },
    }
  }
</script>

<style scoped lang="less">
  #app{
    font-family: PingFang-SC-Regular;
    .appfade-enter-active{
      transition: opacity 1.5s
    }
    .appfade-enter, .appfade-leave-to {
      opacity:0;
    }
    .appfade-enter-to, .appfade-leave{
      opacity:1;
    }
  }
.app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
